<template>
   <!-- 顶部用户信息条 -->
 <div class="container">
    <div class="topbar clearfix">
        <div class="topbar_left left">
            <img src="../assets/logo.png" alt="">
            <i class="iconfont icon-diao"></i>
            <span style="font-size: 16px; cursor: pointer;" @click="toHomePage">Fish</span>
            <i class="iconfont icon-diaoyuzhishu"></i>
        </div>
        <div class="topbar_right right clearfix">
            <img :src="avatorPath" alt="">
            <span v-show="isLogined" class="username" @click="isLogout = !isLogout">{{ userDetail.name }}</span>
            <span v-show="!isLogined" @click="isShow = true"><i class="iconfont icon-denglu"></i>未登录,点击登录</span>
        </div>
    </div>
    <div v-show="isShow" class="mask">
        <LoginVue class="loginForm" @transmit="getStatus"/>
    </div>
    <div class="mask" v-show="showReg">
        <Register/>
    </div>
    <div class="logout" v-show="isLogout">  
        <div @click="handleLogout"><i class="iconfont icon-tuichudenglu"></i>退出登录</div>
    </div>
</div>
</template>

<script>

import LoginVue from '../components/login'
import Register from '../components/register.vue'
import { mapMutations, mapState,mapActions} from 'vuex'
import {Logout} from '../request/api'
export default {
    components:{
        LoginVue,Register
    },
    data(){
        return{
            isLogin:false,
            form: {
                username: '',
                password:''
            },
            // 登录表单
            isShow:false,
            avatorPath:'',
            isLogout:false
        }
    },
    computed:{
    ...mapState({
      isLogined:state=>state.loginStatus.isLogined,
      userInfo:state=>state.userInfo.userInfo,
      userDetail:state=>state.userInfo.userDetail,
      showReg:state=>state.registerStatus.showReg
    }),
  },
    methods:{
        ...mapMutations({
            setUserDetail:'userInfo/setUserDetail',
            setUserInfo:'userInfo/setUserInfo',
            setCount:'topbarStatus/setCount',
            changeIsLogined:'loginStatus/changeIsLogined',
            setIsShowNav:'navStatus/setIsShowNav',
        }),
        ...mapActions({
            asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast',
        }),
        // 登录form的显示与隐藏
        getStatus(show){
            this.isShow = show
        },
        // 退出登录
        async handleLogout(){
            // 清除登录状态
            let res = await Logout()
            if(res.data.state == 200){
                // 清除用户信息
                this.setUserDetail({name:'张三',avator:'admin.jpg'})
                this.setUserInfo({})
                this.changeIsLogined(false)
                // 刷新topbar
                this.setCount(1)
                // 重定向到首页
                this.$router.push('/')
                //提示退出成功
                this.asyncChangeIsShowToast({
                    msg:'退出成功',
                    type:'success'
                })
                // 隐藏按钮
                this.isLogout = false
            }else{
               //提示退出失败
               this.asyncChangeIsShowToast({
                    msg:'退出失败',
                    type:'error'
                }) 
            }
            
        },
        toHomePage(){
            this.$router.push('/')
            this.setIsShowNav(true)
        }
    },
    mounted(){
        this.avatorPath = require('../assets/avator/'+this.userDetail.avator)
    },
    beforeUpdate(){
        this.avatorPath = require('../assets/avator/'+this.userDetail.avator)
    }
}
</script>

<style scoped>
.mask{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    position: relative;
}
.username{
    display: inline-block;
    cursor: pointer;
}
.logout{
    position: absolute;
    height: 20px;
    line-height: 20px;
    padding: 5px;
    right: 15px;
    top: 50px;
    background-color: #85878b;
    z-index: 101;
    color: black;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
}

.logout:hover{
    background-color: #66b1ff;
}
.loginForm{
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-50%);
}
    
        .topbar{
            height: 60px;
            line-height: 60px;
            background-color: #5993ce;
            overflow: hidden;
            border-radius: 4px;
        }
        .topbar_left img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: 20px;
            margin-right: 10px;
        }
        .topbar_right{
            margin-right: 20px;
            position: relative;
        }
        .topbar_right img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: 20px;
            margin-right: 10px;
        }
</style>
